<template>
  <div>
    <header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选择人员:">
          <el-select v-model="formInline.ple" placeholder="所有人">
            <el-option label="人员一" value="8:00"></el-option>
            <el-option label="人员二" value="9:00"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间:">
          <el-select v-model="formInline.start" placeholder="请选择时间">
            <el-option label="时间一" value="8:00"></el-option>
            <el-option label="时间二" value="9:00"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-select v-model="formInline.end" placeholder="请选择时间">
            <el-option label="人员一" value="8:00"></el-option>
            <el-option label="人员二" value="9:00"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物料状态:">
          <el-select v-model="formInline.status" placeholder="请选择时间">
            <el-option label="未使用" value="8:00"></el-option>
            <el-option label="制作中" value="9:00"></el-option>
            <el-option label="已完成" value="8:00"></el-option>
            <el-option label="推广中" value="9:00"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </header>
    <div class="title">
      <span>
        <div class="bt">总物料数</div>
        <div class="num">12</div>
      </span>
      <span>
        <div class="bt">已下单</div>
        <div class="num">10</div>
      </span>
      <span>
        <div class="bt">已完成</div>
        <div class="num">9</div>
      </span>
      <span>
        <div class="bt">已上线</div>
        <div class="num">9</div>
      </span>
    </div>
    <div class="lb">
      <span>
        <span v-for="i in card.card1" :key="i">
          <div class="js">坤坤黑粉头子</div>
          <div class="status">状态：已激活</div>
          <div class="xian"></div>
          <div class="time">创建时间：2022-8-9 13:30</div>
        </span>
      </span>
      <span>
        <span v-for="i in card.card2" :key="i">
          <div class="js">坤坤黑粉头子</div>
          <div class="status">状态：已激活</div>
          <div class="xian"></div>
          <div class="time">创建时间：2022-8-9 13:30</div>
        </span>
      </span>
      <span>
        <span v-for="i in card.card3" :key="i">
          <div class="js">坤坤黑粉头子</div>
          <div class="status">状态：已激活</div>
          <div class="xian"></div>
          <div class="time">创建时间：2022-8-9 13:30</div>
        </span>
      </span>
      <span>
        <span v-for="i in card.card4" :key="i">
          <div class="js">坤坤黑粉头子</div>
          <div class="status">状态：已激活</div>
          <div class="xian"></div>
          <div class="time">创建时间：2022-8-9 13:30</div>
        </span>
      </span>
    </div>
    <!-- 加载更多 -->
    <div class="loader" @click="add">查看更多 +</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        ple: "",
        start: "",
        end: "",
        status: "",
      },
      // 卡片数据
      card: {
        card1: 3,
        card2: 3,
        card3: 3,
        card4: 3,
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    add() {
      this.card.card1++;
      this.card.card2++;
      this.card.card3++;
      this.card.card4++;
      this.card.card1 = this.card.card1 < 12 ? this.card.card1++ : 12;
      this.card.card2 = this.card.card2 < 10 ? this.card.card2++ : 10;
      this.card.card3 = this.card.card3 < 9 ? this.card.card3++ : 9;
      this.card.card4 = this.card.card4 < 9 ? this.card.card4++ : 9;
    },
  },
};
</script>
<style scoped lang="less">
header {
  margin-top: 20px;
  width: 96%;
  height: 60px;
  border: 1px solid #ccc;
  .demo-form-inline {
    margin-left: 20px;
    margin-top: 11px;
  }
}

.title {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  width: 96%;
  height: 100px;
  span {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 360px;
    margin-right: 20px;
    height: 100px;
    border-bottom: 6px solid #636f8a;
    .bt {
      width: 130px;
      height: 30px;
      font-size: 20px;
      font-weight: 600;
    }
    .num {
      width: 60px;
      height: 30px;
      border-radius: 15px;
      font-weight: 600;
      text-align: center;
      line-height: 30px;
      color: #707070;
      border: 1px solid #ccc;
    }
  }
}

.lb {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  width: 96%;
  span {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 360px;
    border-radius: 10px;
    span {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-content: center;
      margin-top: 20px;
      margin-left: -20px;
      width: 100%;
      height: 140px;
      border: 1px solid #ccc;
      box-shadow: 1px 1px 2px;
      .js,
      .status {
        margin-left: 10px;
        width: 100%;
        height: 30%;
        font-size: 12px;
        font-weight: 500;
      }
      .xian {
        width: 100%;
        height: 0.5px;
        background-color: #ccc;
      }
      .status {
        color: #636f8a;
      }
      .time {
        text-align: right;
        width: 100%;
        height: 12%;
        font-size: 12px;
        font-weight: 500;
        color: #636f8a;
      }
    }
  }
}

.loader {
  cursor: pointer;
  position: relative;
  top: 58px;
  left: 740px;
  text-align: center;
  line-height: 50px;
  width: 150px;
  height: 50px;
  color: #fff;
  background-color: #707070;
  border-radius: 10px;
}
</style>
